<!-- 忘记密码 -->
<template>
  <div>
    <div class="wrap">
      <div class="form-data">
        <div style="display: flex;justify-content: center;align-items: center;margin-bottom:30px;">
          <img src="@/assets/images/1481892407.png" width="125" height="60" @click="toPage('/')">
          <span style="font-size:28px;color:#fff;font-weight:700">YS LOCKER</span>
        </div>
        <div class="form1">
          <p class="p-input pos">
            <input type="text" v-model="formData.email" :placeholder="$t('lan.pleaseEmail')">
          </p>
          <p class="p-input pos code hide">
            <input maxlength="6" v-model="formData.code" :placeholder="$t('lan.pleaseCode')">
            <el-button type="primary" class="send" :disabled="sendCode" @click="sendVerificationCode">{{codeEmail}}</el-button>
          </p>
          <p class="p-input pos">
            <input type="password" v-model="formData.password" :placeholder="$t('lan.newPassword')">
          </p>
          <p class="p-input pos">
            <input type="password" v-model="confirmPassword" :placeholder="$t('lan.confirmationPassword')">
          </p>
        </div>

        <el-button class="lang-btn " type="primary" :loading="loading" @click="forgetPassword">{{$t('lan.retrievePassword')}}</el-button>
        <p class="right_now">{{$t('lan.account')}}，<span @click="toPage('/login')">{{$t('lan.account1')}}</span></p>
      </div>
    </div>
    <div class="footer">Copyright © 2016-2020 {{$t('lan.reserved')}}</div>
  </div>
</template>
<script>
import { forgetPwd, sendForgetCode } from '../api'
import { Notification } from 'element-ui'
export default {
  data () {
    return {
      codeEmail: this.$t('lan.sendEmailCode'),
      sendCode: false,
      formData: {
        code: null,
        email: null,
        password: null,
      },
      sendLoading: false,
      loading: false,
      confirmPassword: '',
    }
  },
  methods: {
    // 发送验证码
    async sendVerificationCode () {
      let email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if (!this.formData.email) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailEmpty') })
      }
      if (!email.test(this.formData.email)) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailFormat') })
      }
      let code = 60
      let timer = setInterval(() => {
        this.sendCode = true
        code--
        this.codeEmail = `${code}s`
        if (code === 0) {
          this.codeEmail = this.$t('lan.sendEmailCode')
          this.sendCode = false
          clearInterval(timer)
        }
      }, 1000)
      const data = await sendForgetCode({ email: this.formData.email })
      Notification({ title: this.$t('lan.success'), type: 'success', message: this.$t('lan.sendSuccess') })
    },
    //忘记密码
    async forgetPassword () {

      let pwd = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,15}$/
      let email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if (!this.formData.email) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailEmpty') })
      }
      if (!email.test(this.formData.email)) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.emailFormat') })
      }
      if (!this.formData.code) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.codeEmpty') })
      }
      if (this.formData.code.length != 6) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.codeFormat') })
      }
      if (!this.formData.password) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.passwordEmpty') })
      }
      if (!pwd.test(this.formData.password)) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.passwordFormat') })
      }
      if (!this.confirmPassword) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.confirmEmpty') })
      }
      if (!pwd.test(this.confirmPassword)) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.confirmPwdFormat') })
      }
      if (this.confirmPassword != this.formData.password) {
        return Notification({ title: this.$t('lan.error'), type: 'error', message: this.$t('lan.matchPassword') })
      }
      try {
        this.loading = true
        const data = await forgetPwd(this.formData)
        Notification({ title: this.$t('lan.success'), type: 'success', message: this.$t('lan.submitSuccess') })
        this.$router.push('/login')
        this.loading = false
      } catch (err) {
        this.loading = true
      }
    }
  },
  mounted () {
    this.formData.email = this.$route.query.email ? this.$route.query.email : null
  }
}
</script>
<style scoped>
::-webkit-input-placeholder {
  color: #898989;
}
:-moz-placeholder {
  color: #898989;
}
::-moz-placeholder {
  color: #898989;
}
:-ms-input-placeholder {
  color: #898989;
}
.footer {
  height: auto;
  padding: 15px 0px;
  line-height: 30px;
  background: #000;
  color: #eee;
  position: absolute;
  font-size: 14px;
  bottom: 0;
  width: 100%;
  text-align: center;
  border: none !important;
}
.form-data {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #3c3d3e;
  width: 780px;
  margin-left: -390px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  padding: 35px 90px 0px 90px;
  box-sizing: border-box;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  position: fixed;
}
.wrap {
  background: url(../../assets/images/bj.png) no-repeat center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-size: cover;
}
.right_now {
  line-height: 45px;
  font-size: 14px;
  color: #cacaca;
  text-align: center;
}
.right_now span {
  color: #ee781e;
  cursor: pointer;
}
</style>